<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            // var a = 10,
            //     b = 20;

            // function fn(x) {
            //     var a = 100,
            //         c = 300;
            //     console.log('fn():', a, b, c, x); // 100 20 300 10

            //     function bar(x) {
            //         var a = 1000,
            //             d = 4000;
            //         console.log('bar():', a, b, c, d, x); 
            //     }
            //     bar(100);// 1000 20 300 4000 100
            //     bar(200);// 1000 20 300 4000 200
            // }
            // fn(10);

            // var x = 10;

            // function fn() {
            //     console.log(x); //10 作用域是全局的
            // }

            // function show(f) {
            //     var x = 20; // 20的作用域只在show里
            //     f();
            // }
            // show(fn);

            var fn = function() {
                console.log(fn); // 打印fn的定义
            }
            fn();
            var obj = {
                fn2: function() {
                    // console.log(fn2); // fn2未定义
                    console.log(this.fn2); // 打印fn2的定义
                }
            }
            obj.fn2();
            // 遍历并绑定点击事件
            var btns = document.getElementsByTagName('button');
            for (var i = 0, length = btns.length; i < length; i++) {
                var btn = btns[i]
                btn.index = i;
                btn.onclick = function() {
                    alert(this.index + 1);
                }
            }

            function f1() {
                var a = 2;

                function f2() {
                    console.log(a);
                }
                f2();
            }
            f1();
            console.log('----------------------------------------------')

            function fn3() {
                // 闭包产生 函数提升 内部函数对象已经创建
                var a = 2;

                function fn4() {
                    a++;
                    console.log(a);
                }
                return fn4;
            }
            var f = fn3();
            f(); // 3
            f(); // 4
            f = null; // 包含闭包的函数对象成了垃圾对象

            function showDelay(msg, time) {
                setTimeout(function() {
                    alert(msg);
                }, time);
            }
            showDelay('时间到了', 3000);
        }
    </script>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</body>

</html>